<!--
  * 首页 用户头部信息
  *
  * @Author:    1024创新实验室-主任：卓大
  * @Date:      2022-09-12 22:34:00
  * @Wechat:    zhuda1024
  * @Email:     lab1024@163.com
  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012
  *
-->
<template>
  <div class="user-header">
    <a-page-header :title="welcomeSentence">
      <template #subTitle>
        <span style="color: #666; margin-left: 20px">所属部门：{{ departmentName }} </span>
      </template>
      <template #extra>
        <p style="color: #333">{{ dayInfo }}</p>
      </template>
      <a-row class="content">
        <span class="left-content"
              style="width:60%">
          <p class="last-login-info">
            <AlertOutlined />{{ lastLoginInfo }}
          </p>
          <a class="sentence"
             href="https://zhuoda.vip/soup"
             target="_blank"> <smile-outlined spin /> {{ heartSentence }} </a>
        </span>
        <div id="weatherIframe"
             style="display:flex;width:38%"
             class="weather">
          <iframe width="100%"
                  scrolling="no"
                  height="43"
                  frameborder="0"
                  allowtransparency="true"
                  :src="iframeSrc"></iframe>
          <el-button color="#626aef"
                     :dark="isDark"
                     @click="changeCity"
                     plain>切换城市</el-button>
        </div>
        <div id="app"
             v-if="hidden"
             style="display:flex;margin-left: 67.5%;">
          <el-select v-model="value"
                     style="margin-left:10px;float: right;width:100px"
                     class="m-2"
                     placeholder="请选择"
                     @change="cityChange">
            <el-option v-for="(item,index) in chengshi.GP"
                       :key="item.id"
                       :label="item.name"
                       :value="index" />
          </el-select>
          <el-select v-model="value1"
                     style="margin-left:10px;float: right;width:100px"
                     class="m-2"
                     placeholder="请选择"
                     @change="cityChange1">
            <el-option v-for="(item,index) in option"
                       :key="item.id"
                       :label="item.name"
                       :value="index" />
          </el-select>
          <el-select v-model="value2"
                     style="margin-left:10px;float: right;width:100px"
                     class="m-2"
                     placeholder="请选择"
                     @change="cityChange2">
            <el-option v-for="(item,index) in option1"
                       :key="item.id"
                       :label="item.name"
                       :value="index" />
          </el-select>
          <el-button color="#626aef"
                     style="margin-left:10px"
                     :dark="isDark"
                     @click="confirm"
                     plain>确认</el-button>
        </div>
      </a-row>
    </a-page-header>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue';
import { useUserStore } from '/@/store/modules/system/user';
import uaparser from 'ua-parser-js';
import { Solar, Lunar } from 'lunar-javascript';
import _ from 'lodash';
import heartSentenceArray from './heart-sentence';
import { chengshi } from './provincesData'
import { employeeApi } from '/src/api/system/employee-api';
import { loginApi } from '/src/api/system/login-api';

const value = ref('')//省
const value1 = ref('')//市
const value2 = ref('')//区

const option = ref([])
const option1 = ref([])

const iframeSrc = ref('//i.tianqi.com/index.php?c=code&id=12&icon=1&num=3&site=12')
const pinyin = ref()
const hidden = ref(false)
function changeCity () {
  hidden.value = true
}

function cityChange () {
  option.value = chengshi.GT[value.value]
  value1.value = 0
  option1.value = chengshi.GC[value.value][value1.value]
  value2.value = 0
  pinyin.value = chengshi.GC[value.value][value1.value][value2.value].pinyin
}

function cityChange1 () {
  option1.value = chengshi.GC[value.value][value1.value]
  value2.value = 0
  pinyin.value = chengshi.GC[value.value][value1.value][value2.value].pinyin
}

function cityChange2 () {
  pinyin.value = chengshi.GC[value.value][value1.value][value2.value].pinyin
}

function confirm () {
  hidden.value = false
  const baseSrc = '//i.tianqi.com/index.php?c=code&id=12&icon=1&num=3&site=12';
  iframeSrc.value = baseSrc + (pinyin.value == '' || pinyin.value == undefined ? '' : ('&py=' + pinyin.value))

  const form = {
    employeeId: userStore.employeeId,
    weatherSrc: pinyin.value,
  };
  updateWeather(form)
}

async function updateWeather (form) {
  await employeeApi.updateWeather(form);
}

const props = {
  checkStrictly: true,
}

const userStore = useUserStore();

//设置天气路径
async function getLoginInfo () {
  try {
    const form = {
      employeeId: userStore.employeeId,
    };
    //获取登录用户信息
    const res = await employeeApi.queryWeather(form);
    const baseSrc = '//i.tianqi.com/index.php?c=code&id=12&icon=1&num=3&site=12';
    iframeSrc.value = baseSrc + (res.weatherSrc == '' || res.weatherSrc == undefined ? '' : ('&py=' + res.weatherSrc))
  } catch (e) {
  }
}
getLoginInfo()

const departmentName = computed(() => userStore.departmentName);

// 欢迎语
const welcomeSentence = computed(() => {
  let sentence = '';
  let now = new Date().getHours();
  if (now > 0 && now <= 6) {
    sentence = '午夜好，';
  } else if (now > 6 && now <= 11) {
    sentence = '早上好，';
  } else if (now > 11 && now <= 14) {
    sentence = '中午好，';
  } else if (now > 14 && now <= 18) {
    sentence = '下午好，';
  } else {
    sentence = '晚上好，';
  }
  return sentence + userStore.$state.actualName;
});

//上次登录信息
const lastLoginInfo = computed(() => {
  let info = '';
  if (userStore.$state.lastLoginTime) {
    info = info + '上次登录:' + userStore.$state.lastLoginTime;
  }

  if (userStore.$state.lastLoginUserAgent) {
    let ua = uaparser(userStore.$state.lastLoginUserAgent);
    info = info + '; 设备:';
    if (ua.browser.name) {
      info = info + ' ' + ua.browser.name;
    }
    if (ua.os.name) {
      info = info + ' ' + ua.os.name;
    }
    let device = ua.device.vendor ? ua.device.vendor + ua.device.model : null;
    if (device) {
      info = info + ' ' + device + ';';
    }
  }

  if (userStore.$state.lastLoginIpRegion) {
    info = info + '; ' + userStore.$state.lastLoginIpRegion;
  }
  if (userStore.$state.lastLoginIp) {
    info = info + '; ' + userStore.$state.lastLoginIp;
  }
  return info;
});

//日期、节日、节气
const dayInfo = computed(() => {
  //阳历
  let solar = Solar.fromDate(new Date());
  let day = solar.toString();
  let week = solar.getWeekInChinese();
  //阴历
  let lunar = Lunar.fromDate(new Date());
  let lunarMonth = lunar.getMonthInChinese();
  let lunarDay = lunar.getDayInChinese();
  //节气
  let jieqi = lunar.getPrevJieQi().getName();
  let next = lunar.getNextJieQi();
  let nextJieqi = next.getName() + ' ' + next.getSolar().toYmd();

  return `${day} 星期${week}，农历${lunarMonth}${lunarDay}（当前${jieqi}，${nextJieqi} ）`;
});

// 毒鸡汤
const heartSentence = computed(() => {
  return heartSentenceArray[_.random(0, heartSentenceArray.length - 1)];
});
</script>
<style scoped lang="less">
.user-header {
  width: 100%;
  background-color: #fff;
  margin-bottom: 10px;

  .left-content {
    width: calc(100% - 420px);
    h3 {
      color: rgba(0, 0, 0, 0.75);
    }
  }

  .content {
    display: flex;
    justify-content: space-between;
    .weather {
      width: 400px;
    }
  }

  .last-login-info {
    font-size: 13px;
    color: #333;
    overflow-wrap: break-word;
    padding: 0;
    margin: 1px 0 0 0;
  }

  .sentence {
    display: block;
    font-size: 12px;
    color: #acacac;
    overflow-wrap: break-word;
    padding: 5px 0 0 0;
    margin: 6px 0 0 0;
  }
  .sentence:hover {
    cursor: pointer;
    text-decoration: underline;
  }
}
</style>
